<template>
  <view class="page-container">
    <!-- 服务说明区域 -->
    <view class="intro-section">
      <view class="intro-content">
        <u-icon name="brush" color="#409eff" size="24"></u-icon>
        <text class="intro-text">请详细填写保洁任务信息，我们会为您安排相应的清洁工作</text>
      </view>
    </view>

    <!-- 表单内容 -->
    <view class="content-section">
      <u-form :model="formData" ref="formRef" :rules="rules">
        <!-- 任务信息 -->
        <view class="form-section">
          <view class="section-title">
            <text class="title-icon">◎◎</text>
            <text class="title-text">任务信息 *</text>
          </view>
          
          <!-- 所属区域 -->
          <view class="form-item">
            <view class="form-label">所属区域 *</view>
            <view class="select-wrapper" @click="showAreaActionSheet">
              <text class="select-text">{{ getAreaText(formData.areaId) || '请选择区域' }}</text>
              <u-icon name="arrow-right" size="16" color="#999"></u-icon>
            </view>
          </view>

          <!-- 任务名称 -->
          <view class="form-item">
            <view class="form-label">任务名称 *</view>
            <u-input 
              v-model="formData.taskName" 
              placeholder="请输入任务名称"
              maxlength="50"
              class="form-input"
            />
          </view>

          <!-- 任务类型 -->
          <view class="form-item">
            <view class="form-label">任务类型 *</view>
            <view class="select-wrapper" @click="showTaskTypeActionSheet">
              <text class="select-text">{{ getTaskTypeText(formData.taskType) || '请选择任务类型' }}</text>
              <u-icon name="arrow-right" size="16" color="#999"></u-icon>
            </view>
          </view>

          <!-- 任务描述 -->
          <view class="form-item">
            <view class="form-label">任务描述</view>
            <u-textarea 
              v-model="formData.description" 
              placeholder="请输入任务描述"
              maxlength="500"
              :auto-height="true"
              class="form-textarea"
            />
          </view>
        </view>

        <!-- 时间安排 -->
        <view class="form-section">
          <view class="section-title">
            <text class="title-icon">△△</text>
            <text class="title-text">时间安排 *</text>
          </view>

          <!-- 计划日期 -->
          <view class="form-item">
            <view class="form-label">计划日期 *</view>
            <view class="select-wrapper" @click="showDatePicker">
              <text class="select-text">{{ formData.scheduledDate || '请选择计划日期' }}</text>
              <u-icon name="arrow-right" size="16" color="#999"></u-icon>
            </view>
          </view>

          <!-- 计划时间 -->
          <view class="form-item">
            <view class="form-label">计划时间 *</view>
            <view class="select-wrapper" @click="showTimePicker">
              <text class="select-text">{{ formData.scheduledTime || '请选择计划时间' }}</text>
              <u-icon name="arrow-right" size="16" color="#999"></u-icon>
            </view>
          </view>
        </view>

        <!-- 分配配置 -->
        <view class="form-section">
          <view class="section-title">
            <text class="title-icon">▲▲</text>
            <text class="title-text">分配配置</text>
          </view>

          <!-- 分配人员 -->
          <view class="form-item">
            <view class="form-label">分配人员</view>
            <view class="select-wrapper" @click="showUserActionSheet">
              <text class="select-text">{{ getUserText(formData.assignedUserId) || '请选择分配人员' }}</text>
              <u-icon name="arrow-right" size="16" color="#999"></u-icon>
            </view>
          </view>

          <!-- 优先级 -->
          <view class="form-item">
            <view class="form-label">优先级 *</view>
            <view class="select-wrapper" @click="showPriorityActionSheet">
              <text class="select-text">{{ getPriorityText(formData.priority) || '请选择优先级' }}</text>
              <u-icon name="arrow-right" size="16" color="#999"></u-icon>
            </view>
          </view>
        </view>
      </u-form>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-buttons">
      <button class="cancel-btn" @click="goBack">取消</button>
      <button class="submit-btn" @click="handleSubmit" :disabled="submitting">
        <u-loading-icon v-if="submitting" mode="circle" size="16" color="#fff"></u-loading-icon>
        <text class="btn-text">{{ submitting ? '提交中...' : '提交' }}</text>
      </button>
    </view>


    <!-- 日期时间选择器已改为使用uni.showActionSheet实现 -->
  </view>
</template>

<script setup>
/**
 * 保洁任务新增页面
 * 严格按照《App端编码规范权威标准声明.md》规范实现
 * 参考区域新增页面样式，构建简洁大方的表单页面
 * 按生产环境高标准编写代码
 * 
 * @author Wu.Liang
 * @date 2025-01-30
 */

import { ref, reactive, computed, onMounted } from 'vue'
import { createCleaningTask, getCleaningAreaPage } from '@/api/cleaning'
import { staffApi } from '@/api/staff'
// 选择器组件已改为内联实现

// 响应式数据
const formRef = ref(null)
const submitting = ref(false)

// 表单数据
const formData = reactive({
  areaId: undefined,
  taskName: '',
  taskType: undefined,
  scheduledDate: '',
  scheduledTime: '',
  assignedUserId: undefined,
  priority: undefined,
  description: ''
})

// 弹窗控制
// 选择器显示状态已改为使用uni.showActionSheet，无需modal状态

// 选项数据
const areaOptions = ref([])
const userOptions = ref([])

// 日期时间选择器已改为使用uni.showActionSheet实现，无需定义columns数据

// 任务类型选项
const taskTypeOptions = ref([
  { name: '常规保洁', value: 'routine' },
  { name: '临时保洁', value: 'temporary' },
  { name: '特殊保洁', value: 'special' }
])

// 优先级选项
const priorityOptions = ref([
  { name: '低', value: 1 },
  { name: '中', value: 2 },
  { name: '高', value: 3 },
  { name: '紧急', value: 4 }
])


// 表单验证规则
const rules = reactive({
  areaId: [
    { required: true, message: '请选择所属区域', trigger: 'change' }
  ],
  taskName: [
    { required: true, message: '请输入任务名称', trigger: 'blur' },
    { min: 2, max: 50, message: '任务名称长度为2-50个字符', trigger: 'blur' }
  ],
  taskType: [
    { required: true, message: '请选择任务类型', trigger: 'change' }
  ],
  scheduledDate: [
    { required: true, message: '请选择计划日期', trigger: 'change' }
  ],
  scheduledTime: [
    { required: true, message: '请选择计划时间', trigger: 'change' }
  ],
  priority: [
    { required: true, message: '请选择优先级', trigger: 'change' }
  ]
})

// 获取区域文本
const getAreaText = (areaId) => {
  const area = areaOptions.value.find(item => item.value === areaId)
  return area ? area.name : ''
}

// 获取任务类型文本
const getTaskTypeText = (taskType) => {
  const type = taskTypeOptions.value.find(item => item.value === taskType)
  return type ? type.name : ''
}

// 获取用户文本
const getUserText = (userId) => {
  const user = userOptions.value.find(item => item.value === userId)
  return user ? user.name : ''
}

// 获取优先级文本
const getPriorityText = (priority) => {
  const pri = priorityOptions.value.find(item => item.value === priority)
  return pri ? pri.name : ''
}

// 显示区域选择
const showAreaActionSheet = () => {
  if (areaOptions.value.length === 0) {
    uni.showToast({
      title: '区域列表加载中...',
      icon: 'loading'
    })
    loadAreaOptions()
    return
  }
  
  const itemList = areaOptions.value.map(item => item.name)
  uni.showActionSheet({
    itemList: itemList,
    success: (res) => {
      const selectedOption = areaOptions.value[res.tapIndex]
      formData.areaId = selectedOption.value
    }
  })
}

// 显示任务类型选择
const showTaskTypeActionSheet = () => {
  const itemList = taskTypeOptions.value.map(item => item.name)
  uni.showActionSheet({
    itemList: itemList,
    success: (res) => {
      const selectedOption = taskTypeOptions.value[res.tapIndex]
      formData.taskType = selectedOption.value
    }
  })
}

// 显示用户选择
const showUserActionSheet = () => {
  if (userOptions.value.length === 0) {
    uni.showToast({
      title: '用户列表加载中...',
      icon: 'loading'
    })
    loadUserOptions()
    return
  }
  
  const itemList = userOptions.value.map(item => item.name)
  uni.showActionSheet({
    itemList: itemList,
    success: (res) => {
      const selectedOption = userOptions.value[res.tapIndex]
      formData.assignedUserId = selectedOption.value
    }
  })
}

// 显示优先级选择
const showPriorityActionSheet = () => {
  const itemList = priorityOptions.value.map(item => item.name)
  uni.showActionSheet({
    itemList: itemList,
    success: (res) => {
      const selectedOption = priorityOptions.value[res.tapIndex]
      formData.priority = selectedOption.value
    }
  })
}

// 显示日期选择器 - 使用uni.showActionSheet支持年/月/日自选（完全分离）
const showDatePicker = () => {
  console.log('=== 打开日期选择器 - 使用uni.showActionSheet ===')
  console.log('当前时间:', new Date().toLocaleString())
  console.log('代码版本: 2025-01-30-v3.0 - 年份范围扩展版本(1949-2100)')
  
  // 强制提示用户代码已执行
  uni.showToast({
    title: '正在打开日期选择器...',
    icon: 'loading',
    duration: 1000
  })
  
  // 强制使用uni.showActionSheet
  try {
    setTimeout(() => {
      // 第一步：选择年份（独立选择器）- 1949年到2100年
      const yearOptions = []
      const yearValues = []
      for (let year = 1949; year <= 2100; year++) {
        yearOptions.push(`${year}年`)
        yearValues.push(year.toString())
      }
      
      uni.showActionSheet({
        title: '选择年份',
        itemList: yearOptions,
        success: (yearRes) => {
          console.log('年份选择结果:', yearRes)
          const selectedYear = yearValues[yearRes.tapIndex]
          
          // 延迟一下再打开月份选择器，确保完全分离
          setTimeout(() => {
            // 第二步：选择月份（独立选择器）
            uni.showActionSheet({
              title: '选择月份',
              itemList: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'],
              success: (monthRes) => {
                console.log('月份选择结果:', monthRes)
                const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
                const selectedMonth = months[monthRes.tapIndex]
                
                // 延迟一下再打开日期选择器，确保完全分离
                setTimeout(() => {
                  // 第三步：选择日期（独立选择器）
                  uni.showActionSheet({
                    title: '选择日期',
                    itemList: ['01日', '02日', '03日', '04日', '05日', '06日', '07日', '08日', '09日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日', '31日'],
                    success: (dayRes) => {
                      console.log('日期选择结果:', dayRes)
                      const days = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
                      const selectedDay = days[dayRes.tapIndex]
                      
                      // 组合日期
                      const selectedDate = `${selectedYear}-${selectedMonth}-${selectedDay}`
                      formData.scheduledDate = selectedDate
                      console.log('设置表单日期:', formData.scheduledDate)
                      
                      uni.showToast({
                        title: `已选择：${selectedYear}年${selectedMonth}月${selectedDay}日`,
                        icon: 'success'
                      })
                    },
                    fail: (err) => {
                      console.log('日期选择失败:', err)
                    }
                  })
                }, 500) // 延迟500ms确保月份选择器完全关闭
              },
              fail: (err) => {
                console.log('月份选择失败:', err)
              }
            })
          }, 500) // 延迟500ms确保年份选择器完全关闭
        },
        fail: (err) => {
          console.log('年份选择失败:', err)
        }
      })
    }, 1200)
  } catch (error) {
    console.error('日期选择器错误:', error)
    uni.showToast({
      title: '日期选择器错误',
      icon: 'error'
    })
  }
}

// 显示时间选择器 - 使用uni.showActionSheet支持时/分自选（完全分离）
const showTimePicker = () => {
  console.log('=== 打开时间选择器 - 使用uni.showActionSheet ===')
  console.log('当前时间:', new Date().toLocaleString())
  console.log('代码版本: 2025-01-30-v2.0 - 时分离版本')
  
  // 强制提示用户代码已执行
  uni.showToast({
    title: '正在打开时间选择器...',
    icon: 'loading',
    duration: 1000
  })
  
  // 强制使用uni.showActionSheet
  try {
    setTimeout(() => {
      // 第一步：选择小时（独立选择器）
      uni.showActionSheet({
        title: '选择小时',
        itemList: ['00时', '01时', '02时', '03时', '04时', '05时', '06时', '07时', '08时', '09时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时'],
        success: (hourRes) => {
          console.log('小时选择结果:', hourRes)
          const hours = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
          const selectedHour = hours[hourRes.tapIndex]
          
          // 延迟一下再打开分钟选择器，确保完全分离
          setTimeout(() => {
            // 第二步：选择分钟（独立选择器）
            uni.showActionSheet({
              title: '选择分钟',
              itemList: ['00分', '05分', '10分', '15分', '20分', '25分', '30分', '35分', '40分', '45分', '50分', '55分'],
              success: (minuteRes) => {
                console.log('分钟选择结果:', minuteRes)
                const minutes = ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55']
                const selectedMinute = minutes[minuteRes.tapIndex]
                
                // 组合时间
                const selectedTime = `${selectedHour}:${selectedMinute}`
                formData.scheduledTime = selectedTime
                console.log('设置表单时间:', formData.scheduledTime)
                
                uni.showToast({
                  title: `已选择：${selectedHour}时${selectedMinute}分`,
                  icon: 'success'
                })
              },
              fail: (err) => {
                console.log('分钟选择失败:', err)
              }
            })
          }, 500) // 延迟500ms确保小时选择器完全关闭
        },
        fail: (err) => {
          console.log('小时选择失败:', err)
        }
      })
    }, 1200)
  } catch (error) {
    console.error('时间选择器错误:', error)
    uni.showToast({
      title: '时间选择器错误',
      icon: 'error'
    })
  }
}

// 日期时间选择器已改为使用uni.showActionSheet实现，事件处理已集成在选择函数中

// 加载区域选项
const loadAreaOptions = async () => {
  try {
    const response = await getCleaningAreaPage({
      pageNum: 1,
      pageSize: 100,
      status: 1 // 只获取启用的区域
    })
    
    if (response.success && response.data) {
      let areaList = []
      if (response.data.records && Array.isArray(response.data.records)) {
        areaList = response.data.records
      } else if (Array.isArray(response.data)) {
        areaList = response.data
      }
      
      areaOptions.value = areaList.map(area => ({
        name: area.areaName,
        value: area.id
      }))
    } else {
      uni.showToast({
        title: '加载区域列表失败',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('加载区域列表失败:', error)
    uni.showToast({
      title: '加载区域列表失败',
      icon: 'none'
    })
  }
}

// 加载用户选项
const loadUserOptions = async () => {
  try {
    console.log('开始加载员工列表...')
    const response = await staffApi.getStaffList({ 
      pageNum: 1, 
      pageSize: 100,
      status: 1 // 只获取启用的员工
    })
    console.log('员工列表API响应:', response)
    
    if (response && response.success && response.data) {
      let userList = []
      if (response.data.records && Array.isArray(response.data.records)) {
        // 分页格式：data.records
        userList = response.data.records
      } else if (Array.isArray(response.data)) {
        // 直接数组格式：data
        userList = response.data
      }
      
      userOptions.value = userList.map(user => ({
        name: user.realName || user.username || user.name,
        value: user.id
      }))
      
      console.log('员工选项设置完成:', userOptions.value)
    } else {
      console.error('员工列表API响应格式错误:', response)
      uni.showToast({
        title: '加载员工列表失败',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('加载员工列表失败:', error)
    uni.showToast({
      title: '加载员工列表失败',
      icon: 'none'
    })
  }
}

// 表单提交
const handleSubmit = async () => {
  try {
    // 表单验证
    const valid = await formRef.value.validate()
    if (!valid) {
      return
    }

    submitting.value = true

    // 数据验证和清理
    const cleanedData = {
      areaId: formData.areaId || null,
      taskName: formData.taskName?.trim() || '',
      taskType: formData.taskType || null,
      scheduledDate: formData.scheduledDate || null,
      scheduledTime: formData.scheduledTime || null,
      assignedUserId: formData.assignedUserId || null,
      priority: formData.priority || null,
      description: formData.description?.trim() || '',
      // 根据是否分配人员设置状态：有分配人员为已分配(2)，无分配人员为待分配(1)
      status: formData.assignedUserId ? 2 : 1
    }
    
    // 验证必填字段
    if (!cleanedData.areaId) {
      uni.showToast({
        title: '请选择所属区域',
        icon: 'none'
      })
      return
    }
    
    if (!cleanedData.taskName) {
      uni.showToast({
        title: '请输入任务名称',
        icon: 'none'
      })
      return
    }
    
    if (!cleanedData.taskType) {
      uni.showToast({
        title: '请选择任务类型',
        icon: 'none'
      })
      return
    }
    
    if (!cleanedData.scheduledDate) {
      uni.showToast({
        title: '请选择计划日期',
        icon: 'none'
      })
      return
    }
    
    if (!cleanedData.scheduledTime) {
      uni.showToast({
        title: '请选择计划时间',
        icon: 'none'
      })
      return
    }
    
    if (!cleanedData.priority) {
      uni.showToast({
        title: '请选择优先级',
        icon: 'none'
      })
      return
    }
    
    console.log('提交数据:', cleanedData)
    console.log('原始表单数据:', formData)

    // 调用API
    const response = await createCleaningTask(cleanedData)
    
    if (response.success) {
      uni.showToast({
        title: '任务创建成功',
        icon: 'success'
      })
      
      // 延迟返回上一页
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    } else {
      uni.showToast({
        title: response.message || '创建失败',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('创建任务失败:', error)
    uni.showToast({
      title: '网络错误，请重试',
      icon: 'none'
    })
  } finally {
    submitting.value = false
  }
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 日期时间选择器数据初始化已移至公共组件中

// 页面加载时初始化
onMounted(() => {
  console.log('保洁任务新增页面初始化')
  // 日期时间选择器数据已在公共组件中预初始化
  // 加载其他数据
  loadAreaOptions()
  loadUserOptions()
})
</script>

<style lang="scss" scoped>
/* 页面容器 - 必须完全顶满手机宽度 */
.page-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 服务说明区域 */
.intro-section {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 16px;
  margin: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  
  .intro-content {
    display: flex;
    align-items: center;
    gap: 12px;
    
    .intro-text {
      flex: 1;
      font-size: 14px;
      color: #666;
      line-height: 1.4;
    }
  }
}

/* 内容区域 - 确保无左右空白 */
.content-section {
  flex: 1;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  margin: 0;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 表单区块 - 统一的间距和样式 */
.form-section {
  margin-bottom: 24px;
  
  .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    
    .title-icon {
      font-size: 16px;
      color: #409eff;
    }
    
    .title-text {
      font-size: 15px;
      font-weight: 600;
      color: #333;
    }
    
    .required {
      color: #f56c6c;
      font-weight: bold;
    }
  }
}

/* 表单项 */
.form-item {
  margin-bottom: 16px;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .form-label {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    font-weight: 500;
  }
}

/* 选择器包装器 */
.select-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8f9fa;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 12px;
  transition: all 0.3s ease;
  min-height: 44px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  
  &:active {
    background: #fff;
    border-color: #409eff;
    transform: scale(0.98);
  }
  
  &:hover {
    border-color: #409eff;
  }
  
  .select-text {
    flex: 1;
    font-size: 14px;
    color: #333;
    text-align: left;
    
    &:empty::before {
      content: attr(placeholder);
      color: #999;
    }
  }
}

/* 表单输入框 */
.form-input {
  width: 100%;
  background: #f8f9fa;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  
  &:focus {
    border-color: #409eff;
    background: #fff;
  }
}

/* 表单文本域 */
.form-textarea {
  width: 100%;
  background: #f8f9fa;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  min-height: 100px;
  
  &:focus {
    border-color: #409eff;
    background: #fff;
  }
}

/* 提交按钮区域 */
.submit-section {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 16px;
  margin: 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 12px;
  
  .btn-cancel {
    flex: 1;
    height: 48px;
    background: #f8f9fa;
    border: 1px solid #e4e7ed;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 500;
    color: #666;
    
    &:active {
      transform: scale(0.98);
    }
  }
  
  .btn-submit {
    flex: 1;
    height: 48px;
    background: linear-gradient(135deg, #409eff, #67c23a);
    border: none;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    
    &:active {
      transform: scale(0.98);
    }
  }
}

/* 响应式适配 */
@media screen and (max-width: 375px) {
  .content-section {
    padding: 12px;
  }
  
  .form-section {
    margin-bottom: 20px;
  }
  
  .intro-section {
    padding: 12px;
  }
  
  .submit-section {
    padding: 12px;
  }
}

@media screen and (min-width: 414px) {
  .content-section {
    padding: 20px;
  }
  
  .intro-section {
    padding: 20px;
  }
  
  .submit-section {
    padding: 20px;
  }
}
</style>
